<template>
	<m-layout :title="title" gap="0 24">
		<m-block bgColor="unset" class="flex-center" gap="30">
			<m-icon type="safety" size="467 279"></m-icon>
		</m-block>
		<m-block gap="30">
			<view class="block-title">
				<text>绑定{{placeholder}}</text>
			</view>
			<m-formItem spa="20 0 0 0">
				<view class="flex item-left" slot="left">
					<m-icon type="icon-youxiang" size="36" spa="0 15 0 0"></m-icon>
					<text>{{placeholder}}</text>
				</view>
				<m-input v-model="account" :placeholder="`请填写${placeholder}`"></m-input>
			</m-formItem>
			<m-formItem spa="30 0 0 0">
				<view class="flex item-left" slot="left">
					<m-icon type="icon-anquan1" size="36" spa="0 15 0 0"></m-icon>
					<text>验证码</text>
				</view>
				<m-input gap="10" v-model="code" placeholder="请输入验证码"  style="padding: 10rpx 10rpx;">
					<m-sendCode slot="right" v-model="account"></m-sendCode>
				</m-input>
			</m-formItem>
		</m-block>
		<m-block gap="30" spa="20 0 0">
			<view class="block-title">
				<text>双重验证</text>
				<text>需向{{placeholderF}}再次发送验证码</text>
			</view>
			<m-formItem spa="20 0 0 0">
				<view class="flex item-left" slot="left">
					<m-icon type="icon-youxiang" size="36" spa="0 15 0 0"></m-icon>
					<text>{{placeholderF}}</text>
				</view>
				<m-input v-model="userinfo.phone || userinfo.emaill" disabled> </m-input>
			</m-formItem>
			
			<m-formItem spa="30 0 0 0">
				<view class="flex item-left" slot="left">
					<m-icon type="icon-anquan1" size="36" spa="0 15 0 0"></m-icon>
					<text>验证码</text>
				</view>
				<m-input v-model="code2" placeholder="请输入验证码" style="padding: 10rpx 10rpx;">
					<m-sendCode slot="right" v-model="userinfo.phone || userinfo.emaill"></m-sendCode>
				</m-input>
			</m-formItem>
		</m-block>

		<m-button block spa="50 0 0" :loading="codeLoading" @click="verify">确定</m-button>
	</m-layout>
</template>

<script>
	import { email, mobile } from '@/libs/fn/verify.js'
	import { SendCode_Phone, SendCode_Mail } from "@/api/Ctrls.js"
	import { BindEmaill, BindPhone } from "@/api/Users.js"
	import { mapState, mapActions } from 'vuex';
	export default {
		data() {
			return {

				account: "", // 手机号或者邮箱
				code: "", // 验证码
				code2: "", // 验证码

				codeLoading: false,
				type: 'phone',
				title: '',


			};
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo
			}),
			placeholder() {
				return this.userinfo.phone ? '邮箱' : '手机号'
			},
			placeholderF() {
				return this.userinfo.phone ? '手机号' : '邮箱'
			},
		},
		mounted() {},
		onLoad({ type }) {
			this.type = type;
		},
		methods: {
			verify() {
				if (!this.code || !this.code2) {
					return this.Toast('请输入验证码');
				}
				if (this.userinfo.phone) {
					this.BindEmaill()
				} else {
					this.BindPhone()
				}
			},
			// 绑定手机号
			async BindPhone() {
				const { success, msg, data } = await BindPhone({
					phone: this.account,
					code: this.code,
					code2: this.code2
				})
				this.Toast(msg)
				if (success) return this.Jump()
			},
			// 绑定邮箱
			async BindEmaill() {
				const { success, msg, data } = await BindEmaill({
					emaill: this.account,
					code: this.code,
					code2: this.code2
				})
				this.Toast(msg)
				if (success) {
					await this.sleep(500)
					this.Jump()
				}
			},
		}
	}
</script>

<style lang="scss">
	// page {
	// 	background-color: #FFFFFF;
	// }
	.block-title {
		text:nth-of-type(1) {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #225CF3;
		}

		text:nth-of-type(2) {
			padding-left: 20rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
		}

	}

	.item-left {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.from-item-pcs {
		font-size: 32rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #CCCCCC;
	}

	.hq {
		border-radius: 100rpx;
		padding: 9rpx 20rpx;
		border-color: linear-gradient(270deg, #00CC92 0%, #38cc1e 100%);
		color: #38cc1e;
	}
</style>